<template>
  <div>
    <el-dialog title="新增工单" :visible="visible" :before-close="close">
      <el-form ref="form" label-width="120px" size="mini" :rules="rules" :model="form">
        <el-form-item label="设备编号：" prop="innerCode">
          <el-input v-model="form.innerCode" style="width:80%;hight:46px" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="工单类型：" prop="productType">
          <el-select v-model="form.productType" placeholder="请选择" style="width:80%">
            <el-option
              v-for="item in type"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="补货数量：">
          <el-link icon="el-icon-edit">补货清单</el-link>
          <!-- <el-button type="text"><i class="el-icon-edit"></i>补货清单</el-button> -->
        </el-form-item>
        <el-form-item label="运营人员：" prop="userName">
          <el-select v-model="form.userName" placeholder="请选择" style="width:80%">
            <el-option
              label="无数据"
              value="哈哈哈"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" style="width:83%;hight:46px" prop="desc">
          <el-input v-model="form.desc" placeholder="请输入备注(不超过40字)" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { gettype, creatorder, username } from '@/api/order'
export default {
  name: 'HrsaasAdd',
  props: {
    visible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      form: {
        userName: '',
        createType: 1,
        innerCode: '',
        userId: 1,
        productType: '',
        desc: '',
        details: []
      },
      type: [],
      rules: {
        innerCode: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 1, max: 15, message: '不符合规范', trigger: 'blur' }
        ],
        productType: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 1, max: 40, message: '不符合规范', trigger: 'blur' }
        ]
      }
    }
  },
  // 监视form变淡数据的变化
  watch: {
    form(newVal) {
      this.form.productType = newVal.productTypeId
    }
  },
  mounted() {
    this.gettype()
    // this.username()
  },

  methods: {
    close() {
      this.$emit('update:visible', false)
      this.$refs.form.resetFields()
      this.form = {}
      console.log(this.form, '为什么清空不生效,生效啦')
    },
    async submit() {
      await this.$refs.form.validate()
      const res = await creatorder(this.form)
      console.log(res, '新增成功了吗')
      this.$message.success('新增成功')
      this.close()
      // this.$emit('update:visible',false)
      this.$refs.form.reserFileds()
      this.form = {}
      this.$parents.getList()
    },
    // 获取工单类型
    async gettype() {
      const res = await gettype()
      console.log(res, '能获取工单类型吗')
      this.type = res
      // map返回一个新数组
      // this.type=res.map(ele=>ele.typeName)
      // console.log(this.type,'type是啥');
    }
    // // 获取运营人员
    // async username(){
    //   const res = await username()
    //   console.log(res,'是运营人员的结果吗');
    // }
  }
}
</script>

<style lang="scss" scoped>
// .color{
//   background-color: #fff;
// }
</style>
